<template>
    <!-- 控制视频排序nav -->
    <el-card shadow="never" style="margin-top: 10px; margin-bottom: 10px; height: 70px;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#f93684"
                style="font-size:14px; margin-top: -12px;margin-left: -400px; border-bottom:none !important;" @select="handleSelect">
                <el-menu-item index="1">综合榜</el-menu-item>
                <el-menu-item index="2">热练榜</el-menu-item>
                <el-menu-item index="3">新锐榜</el-menu-item>             
                <el-menu-item index="4">最新</el-menu-item>
            </el-menu>
        </el-card>
        <!-- 视频内容 -->
        <div class="card_content_wrapper">
            <div class="loadMoreList">
                <div class="content_card_item">
                    <!-- 视频内容 -->
                    <div class="card_item">
                        <!-- 视频图片 -->
                        <div class="card-top">
                            <img class="cover" src="./R-C (6).jpg" alt="">
                            <!-- 播放按钮 -->
                            <img class="play" src="./4d.png" alt="">
                            <span>123</span>
                        </div>
                        <div class="card-bottom">
                            <div class="card-bottom-top">
                                <div class="video-text">123</div>
                                <div class="price-zan">
                                    <span class="price">123</span>
                                    <span class="zan">123</span>
                                </div>
                                <div class="vip-video">
                                    <img src="./vip_free@3x.png" alt="">
                                </div>
                                <div class="myZan">
                                    <svg t="1666139214246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4652" width="14" height="14"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="4653"></path></svg>
                                    <span>15</span>
                                    <svg t="1666139352255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5643" width="14" height="14"><path d="M622.56056 464.834794c0 27.928073 22.73684 50.64854 50.664913 50.64854 27.956725 0 50.693566-22.720468 50.693566-50.64854 0-27.928073-22.73684-50.66389-50.693566-50.66389C645.2974 414.171927 622.56056 436.907745 622.56056 464.834794" p-id="5644"></path><path d="M931.254178 211.459063c0-40.637536-33.05893-73.698512-73.728188-73.698512L166.471964 137.76055c-40.637536 0-73.727165 33.059953-73.727165 73.698512l0 506.796488c0 40.637536 33.088606 73.696466 73.727165 73.696466l251.16846 0 94.343715 94.28641 94.315062-94.28641 251.226788 0c40.669258 0 73.728188-33.05893 73.728188-73.696466l0-82.560344-0.089028-1.282203L931.254178 211.459063zM875.96699 695.220928c0 22.88522-18.558681 41.444924-41.443901 41.444924L579.446623 736.665853l-67.462484 67.490114-67.430762-67.490114L189.506587 736.665853c-22.88522 0-41.4746-18.559705-41.4746-41.444924L148.031986 234.493685c0-22.88522 18.58938-41.488927 41.4746-41.488927l645.01548 0c22.88522 0 41.443901 18.603707 41.443901 41.488927l0 396.579247 0 36.161594L875.965967 695.220928z" p-id="5645"></path><path d="M461.321272 464.834794c0 27.928073 22.735817 50.64854 50.662867 50.64854 27.929096 0 50.66389-22.720468 50.66389-50.64854 0-27.928073-22.734794-50.66389-50.66389-50.66389C484.057089 414.171927 461.321272 436.907745 461.321272 464.834794" p-id="5646"></path><path d="M300.083008 464.834794c0 27.928073 22.735817 50.64854 50.66389 50.64854 27.927049 0 50.662867-22.720468 50.662867-50.64854 0-27.928073-22.735817-50.66389-50.662867-50.66389C322.817802 414.171927 300.083008 436.907745 300.083008 464.834794" p-id="5647"></path></svg>
                                    <span>15</span>
                                    <svg t="1666139387021" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6647" width="14" height="14"><path d="M512 150.25664c7.1424 0 20.224 2.2272 27.59168 17.152l81.24416 164.61312a82.0224 82.0224 0 0 0 61.78816 44.91264l181.69344 26.40384c16.46592 2.39104 22.6304 14.14656 24.83712 20.9408 2.20672 6.79424 4.13184 19.92192-7.7824 31.5392l-131.48672 128.16384a82.03776 82.03776 0 0 0-23.58272 72.61184l31.03744 180.96128c1.6128 9.41568-0.54272 17.72032-6.40512 24.6784-6.08256 7.21408-15.01696 11.52-23.90016 11.52-4.83328 0-9.5232-1.2288-14.336-3.7632l-162.49856-85.43232a82.35008 82.35008 0 0 0-38.19008-9.43104c-13.25056 0-26.45504 3.26144-38.17984 9.42592L311.31648 869.9904c-4.75136 2.49856-9.5744 3.7632-14.336 3.7632-8.88832 0-17.8176-4.30592-23.90016-11.51488-5.8624-6.95808-8.01792-15.26272-6.40512-24.6784l31.03744-180.95104a82.03264 82.03264 0 0 0-23.59808-72.6272l-131.4816-128.16896c-11.91424-11.61728-9.99424-24.74496-7.7824-31.5392 2.20672-6.79424 8.36608-18.54464 24.83712-20.9408l181.69344-26.39872a81.9968 81.9968 0 0 0 61.7728-44.88192l81.25952-164.64384c7.36256-14.9248 20.44416-17.152 27.58656-17.152m0-71.79264c-36.57728 0-73.15968 19.05664-91.96544 57.16992L338.77504 300.27776a10.25536 10.25536 0 0 1-7.72096 5.61152L149.36064 332.288c-84.11648 12.22144-117.7088 115.59936-56.83712 174.92992l131.47648 128.15872c2.41664 2.3552 3.52256 5.74976 2.94912 9.07776l-31.03744 180.96128c-11.37152 66.29376 41.30304 120.12032 101.06368 120.12032 15.76448 0 32.04096-3.75296 47.744-12.0064l162.51392-85.43744a10.28096 10.28096 0 0 1 9.54368 0l162.51392 85.43744c15.70816 8.25856 31.96928 12.0064 47.744 12.0064 59.75552 0 112.43008-53.8368 101.06368-120.12032l-31.03744-180.96128a10.26048 10.26048 0 0 1 2.94912-9.07776l131.47648-128.15872c60.87168-59.33056 27.27936-162.70848-56.83712-174.92992l-181.69344-26.40384a10.25536 10.25536 0 0 1-7.72096-5.61152L603.97568 135.6288c-18.816-38.10816-55.3984-57.1648-91.97568-57.1648z" fill="#666666" p-id="6648"></path></svg>
                                    <span>20</span>
                                </div>
                            </div>
                            <div class="card-bottom-don">
                                <div class="botton-text">
                                     <img class="userAva" src="./1.jpg" alt="">
                                     <span>123</span>
                                     <img src="" alt="">
                                </div>
                                <div class="date">d12a3sd1</div>
                            </div>
                        </div>
                    </div>
                    <!---->
                    <!---->
                </div>
            </div>
             <!-- 加载更多-->
             <div class="load_more_btn_wrapper" style="">
                    <span class="load_more_btn" style="">加载更多</span>
                    <div style="color: rgb(204, 204, 204); text-align: center; padding-top: 20px; display: none;">—
                        没有更多内容啦 —
                    </div>
                </div>
        </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
// 引入发发送请求函数

// 收集发请求需要的数据
// 一页多少数据
let pageSize = ref<number>(20)
// 当前页
let pageNum = ref<number>(0)
onMounted(() => {
    
})
</script>

<style scoped>
/* 视频 */
.card_content_wrapper {
    margin-top: 20px;
    padding-bottom: 20px;
}

.card_content_wrapper .loadMoreList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
}

.content_card_item {
    /* border: solid 1px red; */
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 4px;
}

.card_item {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 224px;
    height: 280px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
}

.card-top {
    width: 100%;
    height: 126px;
    position: relative;
    /* border-radius: 4px; */
}

.card-top .cover {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
/* 鼠标滑过视频图片 */
.card-top .cover:hover{
    opacity: .6;
}
.play {
    position: absolute;
    top: 80px;
    left: 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.card-top span {
    position: absolute;
    color: #fff;
    top: 82px;
    right: 10px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .6);
}

.card-bottom {
    width: 100%;

}

.card-bottom-top {
    width: 100%;
    height: 104px;
    display: flex;
    padding: 0px 6px;
    box-sizing: border-box;
    flex-direction: column;
    border-bottom:1px solid #b1b5c1 ;
}

.video-text {
    font-size: 14px;
    color: #111;
    padding-top: 10px;
    /* padding-bottom: 0; */
    line-height: 18px;
    height: 45px;
    box-sizing: border-box;
}

.price-zan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 8px 6px; */
    box-sizing: border-box;
}

.price-zan span {
    display: inline-block;

}

.price-zan .price {
    color: #f93684;
    font-size: 16px;
}

.price-zan .zan {
    font-size: 12px;
    color: #b1b5c1;
}

.vip-video img {
    display: inline-block;
    width: 38px;
    height: 14px;
}
.card-bottom-don{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-bottom-don .botton-text span {
    display: inline-block;
    line-height: 50px;
    font-size: 12px;
    margin-left: 8px;
}
.botton-text{
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 6px;
    box-sizing: border-box;
}
.botton-text .userAva{
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.date{
    font-size: 12px;
    color: #b1b5c1;
    padding-right:5px ;
    box-sizing: border-box;
}
.myZan{
    display: flex;
    font-size: 12px;
    align-items: center;
    height: 28px;
    margin-bottom: 20px;
}
.myZan .icon{
    margin-right: 5px;
}
.myZan span {
    display: inline-block;
    margin-right: 20px;
}
/* 加载更多 */
.load_more_btn{
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #82858e;
    border: 1px solid #eaecf0;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    margin: 20px auto 0;
    cursor: pointer;
}
/* 控制视频 */
/deep/.is-active {
    background-color: white !important;
    border-bottom: none !important;
}

/deep/.el-menu-item:hover {
    background-color: white !important;
    color: #f93684 !important;
}
</style>